<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true">
			<text slot='center-slot' class="center-slot">钻石赠送</text>
			<!-- <text slot='right-slot' class="right-slot">完成</text> -->
		</top-navigation>
		<u-toast ref="uToast"></u-toast>

		<!-- 我的baby -->
		<view class="" style="height: 40rpx;">

		</view>
		<view class="label justify-start">
			接收人ID
		</view>
		<view class="top-box">
			<view class="top-cell justify-between align-center">
				<u-input class="a-input DINPro-Bold" placeholderClass="placeholder-class"
				 placeholderStyle='color: rgba(255,255,255,.4);'
				 v-model="to_code" color='#FFF' border="none" clearable placeholder="请输入对方的ID"
				maxlength='7'
					@change='onInputId'></u-input>
				<view class="user-info justify-start align-center" v-if="isSearch">
					<image :src="userInfo.avatar" mode=""></image>
					{{userInfo.nickname}}
				</view>
			</view>
		</view>
		<view class="label justify-start">
		</view>
		<view class="top-box-2 justify-between align-center">
			<view class="label-1">
				赠送数量
			</view>
			<view class="bujin">
				<view class="goods-num justify-center align-center">
					<u-number-box v-model="value" bgColor='#292838' color='#FFF' @change='onInput'>
						<view slot="minus" class="minus">
							<u-icon name="minus" size="12"></u-icon>
						</view>
						<!-- <text slot="input" style="width: 60px;text-align: center;color: #FFF;"
							class="input">{{value}}</text> -->
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
		</view>
		<view class="tips justify-start align-end">
			拥有钻石: <text class="shuijing-num DINPro-Bold">{{oreInfo.crystal}}</text>个
		</view>
		<view class="tip justify-start">
			{{oreInfo.fee_text}}
		</view>
		<view class="info-box" v-if="isSearch">
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long ">
					赠送数量
				</view>
				<view class="name DINPro-Bold">
					{{value}}
				</view>
			</view>
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					手续费
				</view>

				<view class="name DINPro-Bold">
					{{ (Number(value) * parseFloat(oreInfo.fee)).toFixed(2) }}
				</view>
			</view>
			<view class="top-cell justify-between align-center">
				<view class="my-qing-long">
					合计
				</view>
				<view class="he-ji DINPro-Bold">
					{{payAll}}
				</view>
			</view>
		</view>
		<view class="btn justify-center align-center" :style="{background: ((!isSearch) || disable)?'#8E929D':'#27ff92'}" @tap="submit">
			赠送
		</view>
		<u-popup :show="infoInputShow" :closeable='true' bgColor='transparent' mode="center"
			@close="infoInputShow=false" round="60rpx">
			<view class="popup-two-box flex-col align-center">
				<u-toast ref="uToastInfo"></u-toast>
				<view class="" style="margin-top: 100rpx;">
					安全密码
				</view>
				<view class="">
					<u-code-input v-model="pay_password" focus @finish="submit" :maxlength="5" dot
						mode="line"></u-code-input>
				</view>
				<!-- 	<view class="info-btn justify-center">
					<view class="pull-info align-center justify-center" @click="goInputInfo">
						完成
					</view>
				</view> -->


			</view>
		</u-popup>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.7'>
			<view class="popup-one-box flex-col align-center">
				<view class="has-shuijing justify-center">
					实名认证后即可使用本功能
				</view>
				<view class=" justify-between">
					<view class="popup-box-btn align-center justify-center" @click="moneyShow=false">
						取消
					</view>
					<view class="popup-box-btn-1 align-center justify-center"
						@click="$navto('/pages/mine/setting/userRealName')">
						去实名
					</view>
				</view>


			</view>
		</u-popup>
		<modal-confirm  :data='userInfo' :num='value' :isShow='confirmShow' @close="confirmShow=false" @update='getCardInfo'></modal-confirm>
	</view>
</template>

<script>
	import {
		geTel
	} from '@/utils/libs.js'
	import validate from 'common/js/validate.js';
	import modalConfirm from './modal/modal-confirm.vue'
	export default {
		components: {
			// 注册组件
			modalConfirm
		},
		data() {
			return {
				confirmShow:false,//确认赠送弹窗
				value: 1,
				infoInputShow: false,//密码弹窗
				pay_password: '',
				current: 0,
				to_code: '',
				oreInfo: {},
				form: {
					mobile: null, //	否	string	手机号
					smscode: null, //	否	string	短信码
					nickname: null, //	否	string	昵称
					airline_id: null, //	否	string	航司ID
					position: null, //	否	string	职务
					identity: null, //	否	string	证件照
					name: null, //	否	string	证件照
					gender: '请选择',

				},
				genderIsShow: false,
				genderList: [
					['男', '女']
				],
				moneyShow: false,
				realName: false, //是否实名
				userInfo: {},
				isSearch: false,

			}
		},
		onLoad() {
			this.getCardInfo()
		},
		computed: {
			disable() {
				return this.payAll > parseFloat(this.oreInfo.crystal)
			},
			payAll() {
				return (Number(this.value) + (Number(this.value) * parseFloat(this.oreInfo.fee))).toFixed(2)
			},
		},
		methods: {
			geTel, //手机号脱敏
			onInput(e) {
				console.log(parseInt(e.value), 'input');
				setTimeout(() => {
					this.value = parseInt(e.value) > parseFloat(this.oreInfo.crystal) ? parseInt(this.oreInfo
						.crystal) : parseInt(e.value) || 1
					this.value = this.value == 0 ? 1 : this.value
				})

			},
			onInputId(e) {
				console.log(e.length, 'id');
				this.isSearch = false
				if (e.length == 7) {
					this.findProfileByInviteCode(e)
				}
			},
			// 查找用户
			async findProfileByInviteCode(e) {
				let url = '/api/v1/get_user'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					user_code: e
				})
				if (code == 200&&data) {
					console.log(data, '查找用户');
					this.userInfo = data
					this.isSearch = true
				} else {
					this.$refs.uToast.show({
						message: '未查询到用户'
					})
				}
			},
			// 手续费 钻石信息
			async getCardInfo() {
				let url = '/api/v1/crystal_transfer'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url)
				if (code == 200) {
					console.log(data, '静态资源');
					this.oreInfo = data
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			/**
			 * 登录验证
			 * @param {Object} data
			 */
			verify(data) {
				let rule = [];

				// 账号验证
				rule = [{
						name: 'to_code',
						checkType: 'required',
						errorMsg: '请输入对方ID'
					},

					{
						name: 'number',
						checkType: 'required',
						errorMsg: '请输入数量'
					}
				];


				var checkRes = validate.check(data, rule);
				if (checkRes) {
					return true;
				} else {
					uni.showToast({
						title: validate.error,
						icon: 'error'
					})
					return false;
				}
			},
			async submit() {
				if(((!this.isSearch) || this.disable)) return
				console.log("this.value: ", this.value);
				let form = {
					to_code: this.to_code,
					number: this.value
				}
				if (!this.verify(form)) return
				if (!this.confirmShow) {
					this.confirmShow = true
					return
				}
				let url = '/api/v1/crystal_transfer'
				let {
					code,
					msg,
					data
				} = await this.$postRequest(url, {
					to_code: this.to_code,
					number: this.value,
					pay_password: this.pay_password
				})
				if (code == 200) {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			genderConfirm(e) {
				// this.form.gender = e.value[0]
				this.form.gender = e.value[0] == '男' ? '1' : '2'
				this.genderIsShow = false
				console.log(e.value[0]);
			},
			myCopy(value) {
				let _this = this
				//提示模板
				uni.setClipboardData({
					data: value, //要被复制的内容
					showToast: false,
					success: () => { //复制成功的回调函数
						_this.$refs.uToast.show({
							message: '已复制',
							type: 'default',
							duration: '500'

						})
						// uni.showToast({ //提示
						// 	title: wxorqq == 'w' ? "微信号已复制" : 'QQ号已复制'
						// })
					}
				});
			},
			setCategory(value) {
				switch (value) {
					case 1:
						// 支付密码
						if (this.realName) {

						} else {
							this.moneyShow = true
						}
						break;
					default:
						break;
				}
			},
			bannerChange() {
				// banner改变
			},
			featureTap(e) {
				this.moneyShow = true
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: #16161E;
		padding: 0 48rpx 60rpx;
		min-height: 100vh;

		.label {
			margin-top: 15rpx;
			width: 100%;
			font-size: .875rem;
			color: rgba(255, 255, 255, .6);
			padding: 0 0 .75rem;
		}

		.label-1 {
			font-size: .875rem;
			color: rgba(255, 255, 255, .6);
			// padding: 0 0 .75rem;
		}

		.center-slot {
			color: #FFF;
		}

		.right-slot {
			font-size: .8125rem;
			color: #27ff92;
		}



	}

	.btn {
		left: 50%;
		transform: translate(-50%, 0);
		right: 0;
		position: fixed;
		height: 90rpx;
		width: calc(100vw - 96rpx);
		border-radius: 8rpx;
		bottom: 45rpx;
		font-weight: 700;
		font-size: 30rpx;
		background-color: #8E929D;
		;
		color: #000;
	}

	.tips {
		width: 100%;
		margin-top: 1.46875rem;
		font-size: .875rem;
		color: rgba(255, 255, 255, .6);

		.shuijing-num {
			color: #FFF;
			font-weight: 700;
			font-size: 18px;
			margin: 0 15rpx;
		}
	}

	.tip {
		width: 100%;
		margin-top: 32rpx;
		font-size: .75rem;
		color: #20FFA8;
	}

	.top-box-2 {
		width: 100%;
		height: 120rpx;
		.goods-num {
			width: 250rpx;
			height: 2rem;
			background-color: #292838;
			border-radius: 120px;

		}

		.minus {
			width: 22px;
			height: 22px;
			@include flex;
			justify-content: center;
			align-items: center;
		}

		.input {
			padding: 0 10px;
		}

		.plus {
			width: 22px;
			height: 22px;
			// background-color: #FF0000;
			border-radius: 50%;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
		}
	}

	.top-box {
		width: 100%;
		position: relative;
		margin: 0rpx auto 0rpx;
		padding: 0rpx 32rpx;
		background-color: #20202c;
		border-radius: 16rpx;

		.top-cell {
			background: #20202c;
			min-height: 120rpx;
			padding: 20rpx 0;
			color: #FFF;
			.a-input{
				background: #20202c;
				/deep/ .placeholder-class{
				font-size: .875rem;
				color: rgba(255,255,255,.4);
			}
			}
			
			
			

			.user-info {
				padding-left: 20rpx;
				color: #FFF;
				font-size: 27rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 18rpx;
					border-radius: 8rpx;
				}
			}

			.name {
				margin-right: 30rpx;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);

			}

			.ava {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}
		}


		.my-qing-long {
			font-size: 28rpx;
			width: 260rpx;
			color: rgba(255, 255, 255, .8);
			text-align: left;
		}

		.long-num {
			width: 30rpx;
			height: 30rpx;

		}
	}

	.info-box {
		width: 100%;
		position: relative;
		margin: 40rpx auto 24rpx;
		padding: 25rpx 32rpx;
		background-color: #20202c;
		border-radius: .5rem;

		.top-cell {
			background: #20202c;
			// height: 120rpx;
			padding: 30rpx 0;

			.name {
				// margin-right: 30rpx;
				font-size: 28rpx;
				color: rgba(255, 255, 255, .8);
			}
		}


		.my-qing-long {
			font-size: 28rpx;
			width: 260rpx;
			color: rgba(255, 255, 255, .8);
			text-align: left;
		}

		.long-num {
			width: 30rpx;
			height: 30rpx;

		}

		.he-ji {
			font-size: 28rpx;
			color: #20FFA8;
			;
		}
	}


	.feature-app {
		height: 400rpx;
		width: 100%;
		padding: 46rpx 32rpx 0;
		margin-bottom: 24rpx;
		box-sizing: border-box;
		background-color: #20202c;
		border-radius: 16rpx;

		.set-name {
			font-size: 28rpx;
			color: #FFF;
		}

		.jiantou {
			width: 30rpx;
			height: 30rpx;
		}

		.feature-box-app {
			margin: 32rpx 0 32rpx;
			width: 155rpx;

			.open-map-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 22rpx;
			}

			.title-order {
				font-size: 24rpx;
				color: #FFFFFFCC;
			}
		}

	}


	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: #1D1D1D;
		padding: 48rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 48rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 227rpx;
			height: 72rpx;
			background: #252727;
			color: rgba(255, 255, 255, .4);
			font-size: 28rpx;
			border-radius: 8rpx;
		}

		.popup-box-btn-1 {
			width: 227rpx;
			height: 72rpx;
			background: #27FF92;
			color: #000;
			font-size: 28rpx;
			margin-left: 24rpx;
			border-radius: 8rpx;
		}




		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}







	}

	.popup-two-box {
		padding-top: 50rpx;
		position: relative;
		width: 692rpx;
		// height: 967rpx;
		background: #FFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		// box-shadow: 0px 6rpx 14rpx 0px rgba(0, 0, 0, 0.16);
		.info-img {
			margin-top: 159rpx;
			width: 478rpx;
			height: 342rpx;
		}

		.info-btn {
			left: 50%;
			transform: translate(-50%, 0);
			position: absolute;
			bottom: 96rpx;
		}

		.pull-info {
			width: 276rpx;
			height: 82rpx;
			background: linear-gradient(180deg, #FF7D87 0%, #DF0011 100%);
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}


		.code-num {
			margin: 40rpx 0 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 35rpx;
		}

		.again {
			margin-top: 40rpx;
		}

		.code-date {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.54);
		}


	}
</style>